<template>
  <div class="table-container">
    <el-table class="table-self" :data="tableData" style="width: 100%">
      <el-table-column label="序号" width="50px" type="index" />
      <el-table-column
        prop="cameraId"
        label="摄像头ID"
        width="180"
        align="center"
      />
      <el-table-column
        prop="videoName"
        label="摄像头名称"
        width="180"
        align="center"
      >
      </el-table-column>
      <!-- <el-table-column prop="riverName" label="所属河流" align="center">
      </el-table-column> -->
      <el-table-column prop="createTime" label="告警时间" align="center">
      </el-table-column>
      <el-table-column prop="alarmTypeName" label="告警类型" align="center">
        <template slot-scope="scope">
          <el-tooltip
            v-if="scope.row.alarmTypeName === '人工标注'"
            class="item"
            effect="dark"
            :content="scope.row.remark"
            placement="top"
          >
            <el-button>{{ scope.row.alarmTypeName }}</el-button>
          </el-tooltip>
          <el-button v-else>{{ scope.row.alarmTypeName }}</el-button>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="regionName" label="行政区划" align="center">
      </el-table-column> -->
      <el-table-column
        label="任务状态"
        align="center"
        prop="alarmStatus"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <!-- <dict-tag
            :options="dict.type.warn_status"
            :value="row.status"
          />  -->
          <span v-if="scope.row.alarmStatus == '0'">未处理</span>
          <span v-else-if="scope.row.alarmStatus == '1'">审核通过</span>
          <span v-else-if="scope.row.alarmStatus == '2'">审核不通过</span>
          <span v-else>-</span>
        </template></el-table-column
      >
      <el-table-column
        label="报警内容"
        align="center"
        prop="alarmContent"
        width="500"
        show-overflow-tooltip
      ></el-table-column>
      <!-- <el-table-column
        label="备注"
        align="center"
        prop="remark"
        show-overflow-tooltip
      ></el-table-column> -->
      <!-- <el-table-column prop="taskid" label="推送任务调度" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.taskid" type="primary">是</el-tag>
          <el-tag v-else type="info">否</el-tag>
        </template>
      </el-table-column> -->
      <!-- <el-table-column prop="status" label="处置状态" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === '已处理'" type="success">{{
            scope.row.status
          }}</el-tag
          ><el-tag v-else-if="scope.row.status === '未处理'" type="warning">{{
            scope.row.status
          }}</el-tag>
          <template v-else>
            <el-tag v-show="scope.row.status" type="info">{{
              scope.row.status
            }}</el-tag>
            <span v-show="!scope.row.status" type="info">--</span>
          </template>
        </template>
      </el-table-column>
      <el-table-column prop="result" label="处置结果" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.result">{{ scope.row.result }}</span>
          <span v-else>--</span>
        </template>
      </el-table-column> -->
      <el-table-column label="操作" width="230" align="center">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="openImg(scope.row)"
            >查看图片</el-button
          >
          <!--<el-button type="text" size="small" @click="openVideo(scope.row)"
            >查看回放</el-button
          > -->
          <!-- <el-button type="text" size="small" @click="launchTask(scope.row)"
            >查看流程</el-button
          > -->
          <el-button
            v-if="scope.row.alarmStatus == '0'"
            type="text"
            size="small"
            @click="publish(scope.row)"
            >发布</el-button
          >
          <el-button
            v-if="scope.row.alarmStatus == '0'"
            type="text"
            size="small"
            @click="noPublish(scope.row)"
            >禁止发布</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 图片 -->
    <My-Dialog
      v-if="dialogVisibleCopyImage"
      :dialogVisibleFa.sync="dialogVisibleCopyImage"
      widthValue="1000px"
      dialogTitle="告警信息查看"
      :isCenter="true"
    >
      <OpenView
        v-if="dialogVisibleCopyImage"
        :dialogVisibleUse.sync="dialogVisibleCopyImage"
        :openImgData="openImgData"
      />
    </My-Dialog>
    <!-- 视频 -->
    <el-dialog
      v-if="dialogVisibleCopyVideo"
      :close-on-click-modal="false"
      :visible.sync="dialogVisibleCopyVideo"
      width="950px"
      title="视频"
    >
      <BackView
        v-if="dialogVisibleCopyVideo"
        :dialogVisibleUse.sync="dialogVisibleCopyVideo"
        :openVideoData="openVideoData"
      />
    </el-dialog>
    <el-dialog title="查看" :visible.sync="lookOpen" width="60%">
      <div style="height: 600px; width: 100%">
        <iframe
          :src="iframeSrc"
          frameborder="0"
          style="width: 100%; height: 100%"
        ></iframe>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import MyDialog from "@/components/MyDialog/index.vue";
import OpenView from "./OpenView.vue";
import BackView from "./back/BackView.vue";
// import { getSid } from "@/api/video/intelligentAnalysisApi.js";
export default {
  name: "",
  props: ["tableData"],
  components: { MyDialog, OpenView, BackView },
  dicts: ["warn_status"],
  data() {
    return {
      //图片
      dialogVisibleCopyImage: false,
      openImgData: {},
      //视频
      dialogVisibleCopyVideo: false,
      openVideoData: {},
      // 流程
      iframeSrc: "",
      lookOpen: false,
      sid: "",
    };
  },
  mounted() {
    this.getSid();
  },
  methods: {
    // 打开详情页面
    getSid() {
      // getSid({
      //   flag: "pc",
      //   uid: this.$store.state.user.sname,
      // }).then((res) => {
      //   if (res.code == 200) {
      //     this.sid = res.sid;
      //   }
      // });
    },
    launchTask(row) {
      // if (!row.status) {
      //   this.$message.warning("任务未创建！");
      // } else if (row.status == "") {
      //   this.$message.warning("任务已关闭！");
      // } else {
      this.lookOpen = true;
      this.iframeSrc =
        // process.env.VUE_APP_BASE_API +
        "/ytpt/portal/r/w?sid=" +
        this.sid +
        "&cmd=CLIENT_DW_FORM_READONLYPAGE&bindid=" +
        row.taskid;
      // }
    },
    // 点击图片
    openImg(e) {
      this.dialogVisibleCopyImage = true;
      this.openImgData = e;
      console.log(this.openImgData, "8989898");
    },
    openVideo(e) {
      this.dialogVisibleCopyVideo = true;
      this.openVideoData = e;
    },
    // 进行发布
    publish(e) {
      console.log(e);
      this.$confirm("是否发布?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$emit("changeStatus", e.alarmId, 1);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    // 禁止发布
    noPublish(e) {
      console.log(e);
      this.$confirm("是否禁止发布?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$emit("changeStatus", e.alarmId, 2);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
  },
};
</script>

<style scoped lang="scss">
.table-container {
  .table-self {
    ::v-deep .el-table__header-wrapper th {
      background-color: #eff3fc;
    }
    margin-top: 10px;
  }
  // 对视频回放单独处理样式（用element的dialog）
  ::v-deep .el-dialog__header {
    background-color: transparent !important;
    padding: 10px !important;
    border-bottom: 1px solid #e5e5e5;
    border-top: 4px solid #409eff;
    background: #fff !important;
  }
}
</style>
